<script setup>
import { useDisplay } from "vuetify";
import ToolbarUser from '@/components/navigation/ToolbarUser.vue';
const { mdAndUp } = useDisplay();
const showMobileSearch = ref(false);
</script>

<template>
  <!-- ---------------------------------------------- -->
  <!--App Bar -->
  <!-- ---------------------------------------------- -->
  <v-app-bar :density="mdAndUp ? 'default' : 'compact'">
    <!-- ---------------------------------------------- -->
    <!-- search input mobil -->
    <!-- ---------------------------------------------- -->
    <div class="d-flex flex-fill align-center" v-if="showMobileSearch">
      <v-text-field color="primary" variant="solo" prepend-inner-icon="mdi-magnify" append-inner-icon="mdi-close"
        @click:append-inner="showMobileSearch = false" hide-details placeholder="Search"></v-text-field>
    </div>
    <div v-else class="px-2 d-flex align-center justify-space-between w-100">
      <!-- 菜单栏分离 -->
      <v-app-bar-nav-icon v-if="!mdAndUp"></v-app-bar-nav-icon>
      <div class="d-flex align-center ml-5" v-if="mdAndUp">
        <v-img width="60" height="60" src="https://kanekikeh.online/wclogo.png"></v-img>
        <div class="ml-3">
          <div>文学与传媒学院</div>
          <div>School Of Literature And Media</div>
        </div>
      </div>
      <v-spacer></v-spacer>
      <div class="d-flex align-center" v-if="mdAndUp">
        <v-btn class="" to="/">首页</v-btn>
        <v-btn class="" to="/VideoCourse">视频课程</v-btn>
        <v-btn class="" to="/AboutWenChuan">走进文传</v-btn>
        <v-btn class="" to="/CoursePerformance">课程展演</v-btn>
        <!-- <a class="" href="/">首页</a>
        <a class="" href="/VideoCourse">视频课程</a>
        <a class="" href="/AboutWenChuan">走进文传</a>
        <a class="" href="/CoursePerformance">课程展演</a> -->
      </div>
      <div>
        <v-text-field v-if="mdAndUp" class="mx-5" style="width: 350px" color="primary" variant="solo" density="compact"
          prepend-inner-icon="mdi-magnify" hide-details placeholder="Search"></v-text-field>
      </div>
      <div class="d-flex">
        <v-btn v-if="!mdAndUp" icon @click="showMobileSearch = true">
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <!-- 这部分需要添加一些内容，不然太空 -->
        <v-divider vertical thickness="2" inset class="ml-5 mr-1"></v-divider>
        <ToolbarUser />
      </div>
    </div>
  </v-app-bar>
</template>

<style scoped lang="scss"></style>
